<template>
	<view class="content" :style="{ height: windowHeight + 'px' }">
		<view class="view">
			<uploadAvator :fileList="model1.avatarImage" name="1" multiple :maxCount="1"
			    @onChange="changes" />
			<u--form labelPosition="left" :model="model1" ref="uForm" :rules="rules">
				<view class="items">
					<u-form-item label="姓名:" prop="nickName">
						<u--input border="none" input-align="right" placeholder="请输入姓名" v-model="model1.nickName"
							clearable></u--input>
					</u-form-item>
				</view>
				<view class="items">
					<u-form-item label="网名:" prop="netName">
						<u--input border="none" input-align="right" placeholder="请输入网名" v-model="model1.netName"
							clearable></u--input>
					</u-form-item>
				</view>
				<view class="items">
					<u-form-item label="性别:" prop="sexName" @click="showGender = true;">
						<u--input input-align="right" v-model="model1.sexName" disabled disabledColor="#ffffff"
							placeholder="请选择" border="none"></u--input>
						<u-icon slot="right" name="arrow-down" color="rgb(172, 172, 172)"></u-icon>
					</u-form-item>
				</view>
				<view class="items">
					<u-form-item label="手机:" prop="phonenumber">
						<u--input input-align="right" border="none" type="number" placeholder="请输入手机号"
							v-model="model1.phonenumber" maxlength='11' clearable></u--input>
					</u-form-item>
				</view>
				<view class="items">
					<u-form-item label="生日:" prop="birthday" @click="showBirthday = true;">
						<u--input input-align="right" v-model="model1.birthday" disabled disabledColor="#ffffff"
							placeholder="请选择" border="none"></u--input>
						<u-icon slot="right" name="arrow-down" color="rgb(172, 172, 172)"></u-icon>
					</u-form-item>
				</view>
				<view class="items">
					<u-form-item label="学校:" prop="deptName" @click="showSchool = true;">
						<u--input input-align="right" v-model="model1.deptName" disabled disabledColor="#ffffff"
							placeholder="请选择" border="none"></u--input>
						<u-icon slot="right" name="arrow-down" color="rgb(172, 172, 172)"></u-icon>
					</u-form-item>
				</view>
				<view class="items">
					<u-form-item label="年级:" prop="grade" @click="showGrade = true;">
						<u--input input-align="right" v-model="model1.grade" disabled disabledColor="#ffffff"
							placeholder="请选择" border="none"></u--input>
						<u-icon slot="right" name="arrow-down" color="rgb(172, 172, 172)"></u-icon>
					</u-form-item>
				</view>
				<view class="items">
					<u-form-item label="圈子:" prop="circleCategory" @click="onMultiplePick">
						<u--input input-align="right" v-model="model1.circleCategory" disabled disabledColor="#ffffff"
							placeholder="请选择" border="none"></u--input>
						<u-icon slot="right" name="arrow-down" color="rgb(172, 172, 172)"></u-icon>
					</u-form-item>
				</view>
				<view class="items">
					<u-form-item label="爱好:" prop="hobby">
						<u--input border="none" input-align="right" placeholder="请输入爱好" v-model="model1.hobby"
							clearable></u--input>
					</u-form-item>
				</view>
				<view class="items">
					<u-form-item label="简介:" prop="introduction">
						<u--input border="none" input-align="right" placeholder="请输入简介" v-model="model1.introduction"
							clearable></u--input>
					</u-form-item>
				</view>
				<view class="items">
					<u-form-item label="家长:" prop="parentPhonenumber">
						<u--input input-align="right" border="none" type="number" placeholder="绑定家长手机号"
							v-model="model1.parentPhonenumber" maxlength='11' clearable></u--input>
					</u-form-item>
				</view>
			</u--form>

			<view class="buttons" @click="submit">
				提交
			</view>
		</view>

		<!-- 性别 -->
		<u-picker keyName="name" @confirm="confirm($event, '性别')" closeOnClickOverlay title="性别" :show="showGender"
			:columns="genderColumns" @close="showGender = false" @cancel="showGender = false"></u-picker>
		<!-- 生日 -->
		<u-datetime-picker :show="showBirthday" @close="showBirthday = false" @cancel="showBirthday = false"
			:minDate="-1357027200" closeOnClickOverlay title="生日" @confirm="confirm($event, '生日')"
			mode="date"></u-datetime-picker>
		<!-- 学校 -->
		<u-picker keyName="name" @confirm="confirm($event, '学校')" closeOnClickOverlay title="学校" :show="showSchool"
			:columns="schoolColumns" @close="showSchool = false" @cancel="showSchool = false"></u-picker>
		<!-- 年级 -->
		<u-picker keyName="name" @confirm="confirm($event, '年级')" closeOnClickOverlay title="年级" :show="showGrade"
			:columns="gradeColumns" @close="showGrade = false" @cancel="showGrade = false"></u-picker>
		<!-- 圈子 -->
		<multiple ref="multiplePick" key-name="name" :list="circleColumns" :defaults="defaultcircleColumns"
			@confirm="onMultiplePickConfirm">
		</multiple>
	</view>
</template>

<script>
	import uploadAvator from './uploadAvator.vue'
	import {
		systemInfo
	} from '../../utils/mixin'
	import {
		getInfo,
		getDicts,
		optionSchool,
		updateUserInfo,
		updateAvatarImage
	} from '@/api/index.js'
	import multiple from './multiple.vue'
	export default {
		components: {
			multiple,
			uploadAvator
		},
		mixins: [systemInfo],
		data() {
			return {
				model1: {
					nickName: '',
					netName: '',
					sexName: '',
					sex: '',
					phonenumber: '',
					birthday: '',
					deptName: '',
					school: '',
					grade: '',
					circleCategory: '',
					hobby: '',
					introduction: '',
					parentPhonenumber: '',
					avatarImage: '',
				},
				// 性别
				showGender: false,
				genderColumns: [],
				// 生日
				showBirthday: false,
				// 学校
				showSchool: false,
				schoolColumns: [],
				// 年级
				showGrade: false,
				gradeColumns: [],
				// 圈子
				showCircle: false,
				circleColumns: [],
				defaultcircleColumns: [],
				rules: {
					phonenumber: [{
							type: 'string',
							required: false,
							message: '请填写手机号码',
							trigger: ['blur', 'change']
						},
						{
							pattern: /^1[3456789]\d{9}$/,
							message: '请输入有效的手机号码',
							trigger: 'blur'
						},
					],
					parentPhonenumber: [{
							type: 'string',
							required: false,
							message: '请填写手机号码',
							trigger: ['blur', 'change']
						},
						{
							pattern: /^1[3456789]\d{9}$/,
							message: '请输入有效的手机号码',
							trigger: 'blur'
						},
					],
					nickName: [{
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}, ],
					netName: [{
						type: 'string',
						required: true,
						message: '请填写网名',
						trigger: ['blur', 'change']
					}, ]
				}
			}
		},
		async onLoad() {
			// 状态栏高度
			this.getSystemInfo();
			// 获取详细信息
			this.getDetail()

			// 性别
			const res = await getDicts('sys_user_sex')
			res.data.forEach(element => {
				element.name = element.dictLabel
				element.value = element.dictValue
			});
			this.genderColumns = [res.data]

			// 学校
			const schoolres = await optionSchool()
			schoolres.data.forEach(element => {
				element.name = element.deptName
				element.value = element.deptId
			});
			this.schoolColumns = [schoolres.data]

			// 年级
			const graderes = await getDicts('djj_grade')
			graderes.data.forEach(element => {
				element.name = element.dictLabel
				element.value = element.dictLabel
			});
			this.gradeColumns = [graderes.data]

			// 圈子
			const circleres = await getDicts('djj_popularize_type')
			circleres.data.forEach(element => {
				element.name = element.dictLabel
				element.value = element.dictLabel
			});
			this.circleColumns = circleres.data
		},
		methods: {
			// 更换头像
			async changes(value){
				this.model1.avatarImage = value
				await updateAvatarImage({avatarImage: value})
				// await uni.$u.toast('修改头像成功');
			},
			// 圈子点击
			onMultiplePick() {
				this.$refs.multiplePick.show();
			},
			// 获取详细信息
			async getDetail() {
				const res = await getInfo()
				res.data.user.sexName = this.genderColumns[0].filter((item) => item.value == res.data.user.sex)[0].name
				this.defaultcircleColumns = res.data.user.circleCategory.split(',')
				this.model1 = res.data.user
			},
			//弹出框确定按钮
			confirm(value, name) {
				if (name == "性别") {
					this.model1.sexName = value.value[0]?.name;
					this.model1.sex = value.value[0]?.value;
					this.showGender = false
				} else if (name == "生日") {
					const date = new Date(value.value);
					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
					const day = String(date.getDate()).padStart(2, '0');
					this.model1.birthday = `${year}-${month}-${day}`;
					this.showBirthday = false
				} else if (name == "学校") {
					this.model1.deptName = value.value[0]?.name;
					this.model1.deptId = value.value[0]?.value;
					this.showSchool = false
				} else if (name == '年级') {
					this.model1.grade = value.value[0]?.value;
					this.showGrade = false
				}
			},
			// 圈子多选确认
			onMultiplePickConfirm(selectedList) {
				this.model1.circleCategory = selectedList.join(',');
				this.$refs.multiplePick.close();
			},
			// 提交
			submit() {
				this.$refs.uForm.validate().then(async (valid) => {
					if (valid) {
						const res = await updateUserInfo(this.model1)
						uni.$u.toast('修改成功');
						// 获取详细信息
						this.getDetail()
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		background-color: rgb(245, 245, 245);
		width: 100%;
		box-sizing: border-box;

		.view {
			width: calc(100% - 60rpx);
			height: calc(100% - 60rpx);
			margin-top: 30rpx;
			box-sizing: border-box;
			padding: 30rpx;
			background-color: #fff;
			position: relative;
			top: 30rpx;
			margin: auto;
			overflow: auto;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			align-content: flex-start;
			border-radius: 15px;

			.touxiang {
				width: 150rpx;
				height: 150rpx;
				margin-bottom: 30rpx;
			}

			.items {
				width: 550rpx;
				border: 1px solid rgb(227, 227, 227);
				margin: 30rpx auto 0;
				border-radius: 8rpx;
				box-sizing: border-box;
				padding: 0 10rpx;
			}

			/deep/.u-form-item__body__left {
				width: 100rpx !important;
				font-weight: 600;
			}

			/deep/.u-form-item__body {
				padding: 14rpx 0 !important;
			}

			.buttons {
				margin: 50rpx auto 0;
				width: 400rpx;
				height: 80rpx;
				background-color: rgba(34, 175, 229);
				color: #fff;
				line-height: 80rpx;
				text-align: center;
				font-size: 36rpx;
				border-radius: 10rpx;
				letter-spacing: 20rpx;
			}
		}
	}
</style>